<p>
  approval-leave works!
</p>

<p-table #dt [columns]="cols" [value]="pendings" selectionMode="single" [(selection)]="selectedLeaveRecord" (onRowSelect)="onRowSelect($event)" [paginator]="true" [rows]="10">
  <ng-template pTemplate="caption">
    待审批的请假记录
    <div style="text-align: right">
      <i class="fa fa-search" style="margin: 20px 4px 0 0"></i>
      <input type="text" pInputText size="50" placeholder="Global Filter" (input)="dt.filterGlobal($event.target.value, 'contains')" style="width: auto">
    </div>
  </ng-template>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns" [pSortableColumn]="col.field">
        {{col.header}}
        <p-sortIcon [field]="col.field"></p-sortIcon>
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr [pSelectableRow]="rowData">
      <td *ngFor="let col of columns">
        {{rowData[col.field]}}
      </td>
    </tr>
  </ng-template>
</p-table>

<p-dialog header="LeaveRecord Details" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" [modal]="true" [width]="400">
  <div class="ui-g ui-fluid" *ngIf="leaveRecord">
    <div class="ui-g-12">
      <div class="ui-g-8">
        <label for="state">审批:2批准，0不批准</label>
      </div>
      <div class="ui-g-4">
        <!--<input type="date" pInputText id="satrt_time" [(ngModel)]="leaveRecord.satrt_time" />-->
        <select name="" id="state" [(ngModel)]="leaveRecord.state">
          <option value="0">0</option>
          <option value="2">2</option>
        </select>
      </div>
    </div>
  </div>
  <p-footer>
    <div class="ui-dialog-buttonpane ui-helper-clearfix">
      <button type="button" pButton icon="fa fa-check" (click)="save()" label="Save"></button>
    </div>
  </p-footer>
</p-dialog>

<br />
<br />

<p-table #dtl [columns]="cols" [value]="processed" [paginator]="true" [rows]="10">
  <ng-template pTemplate="caption">
    已处理的请假记录
    <div style="text-align: right">
      <i class="fa fa-search" style="margin: 20px 4px 0 0"></i>
      <input type="text" pInputText size="50" placeholder="Global Filter" (input)="dtl.filterGlobal($event.target.value, 'contains')" style="width: auto">
    </div>
  </ng-template>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns" [pSortableColumn]="col.field">
        {{col.header}}
        <p-sortIcon [field]="col.field"></p-sortIcon>
      </th>
    </tr>
    <tr>
      <th *ngFor="let col of columns" [ngSwitch]="col.field">
        <input *ngSwitchCase="'satrt_time'" pInputText type="text" (input)="dtl.filter($event.target.value, col.field, col.filterMatchMode)">
        <input *ngSwitchCase="'end_time'" pInputText type="text" (input)="dtl.filter($event.target.value, col.field, col.filterMatchMode)">
        <input *ngSwitchCase="'days'" pInputText type="text" (input)="dtl.filter($event.target.value, col.field, col.filterMatchMode)">
        <input *ngSwitchCase="'reason'" pInputText type="text" (input)="dtl.filter($event.target.value, col.field, col.filterMatchMode)">
        <input *ngSwitchCase="'type_name'" pInputText type="text" (input)="dtl.filter($event.target.value, col.field, col.filterMatchMode)">
        <input *ngSwitchCase="'des'" pInputText type="text" (input)="dtl.filter($event.target.value, col.field, col.filterMatchMode)">
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr [pSelectableRow]="rowData">
      <td *ngFor="let col of columns">
        {{rowData[col.field]}}
      </td>
    </tr>
  </ng-template>
</p-table>
